<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #content{
        border: 2px dashed #000;
        height: 100px;
    }
</style>
<body>
    <a href="#/news">新闻</a>
    <a href="#/home">主页</a>
    <div id="content"></div>
</body>
</html>
<script>
    //hash = #
    //获取hash  location.hash

    //需要监听hash值的变化  onhashchange

    //hash模式的特点 使用hashchange来监听地址栏hash的变化，而切换页面hash后面的内容会包含在地址里，但不会包含在http请求里面

    //优点： 兼容性好，不容易出现404的情况

//  hash history abstract模式的不同点(背):

// 1. hash有#号,#号后面的url不会向后端发起请求
// 2. hash路由使用onhashchange监听   history使用onpopstate监听 
// 3. history使用的是H5的api pushState replaceState
// 4. history容易造成404,原因是将地址当成了接口,向通过http发起了请求,但是没有服务响应
// 5. abstract模式是在没有浏览器api的情况下自动启用,abstract模式在切换页面的时候,路径是不会发生变化的
// 6. 关键字 onhashchange pushstate replacestate popstate
// 7. 如果后端不配合 不要使用history模式
// 8. 配置nginx中的location字段 就是当服务匹配不到资源的时候,自动返回首页


    window.onhashchange = function(){
        console.log(location.hash);
        switch(location.hash){
            case '#/news':
                content.innerHTML = "<h1>新闻</h1>"
                break
            case '#/home':
                content.innerHTML = "<h1>主页</h1>"
        }
    }
</script>